<template>
	<view class="search-result-page">
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="search-input-box" @click="goToSearch">
				<text class="search-icon">🔍</text>
				<text class="search-text">{{ keyword }}</text>
			</view>
		</view>
		
		<!-- 分类标签 -->
		<view class="category-tabs">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index" 
				:class="['tab-item', currentTab === index ? 'active' : '']"
				@click="switchTab(index)"
			>
				{{ tab }}
			</view>
		</view>
		
		<!-- 搜索结果内容 -->
		<view class="result-content">
			<!-- 综合标签页 -->
			<view v-if="currentTab === 0" class="tab-content">
				<!-- 最相关 -->
				<view class="relevant-section" v-if="scenicList.length > 0">
					<view class="section-title">
						<view class="title-badge">最相关</view>
					</view>
					<view class="relevant-item" @click="goToDetail(scenicList[0].id)">
						<image :src="scenicList[0].coverImage || defaultImage" class="relevant-image"></image>
						<view class="relevant-info">
							<text class="relevant-title">{{ scenicList[0].title }}</text>
							<text class="relevant-level">{{ scenicList[0].level || '5A' }}</text>
							<view class="relevant-rating">
								<text class="rating-score">{{ scenicList[0].rate || 4.8 }}分</text>
								<text class="rating-count">{{ scenicList[0].commentCount || 17532 }}人评价</text>
							</view>
							<view class="relevant-address">
								<text class="icon-pin">📍</text>
								<text class="address-text">{{ scenicList[0].address }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 排序选项 -->
				<view class="sort-bar">
					<view 
						v-for="(sort, index) in sortOptions" 
						:key="index"
						:class="['sort-item', currentSort === index ? 'active' : '']"
						@click="changeSort(index)"
					>
						{{ sort }}
					</view>
				</view>
				
				<!-- 景点列表 -->
				<view class="scenic-list">
					<view 
						v-for="item in displayList" 
						:key="item.id" 
						class="scenic-card"
						@click="goToDetail(item.id)"
					>
						<image :src="item.coverImage || defaultImage" class="scenic-image" mode="aspectFill"></image>
						<view class="scenic-info">
							<text class="scenic-title">{{ item.title }}</text>
							<view class="scenic-meta">
								<image :src="item.userAvatar || defaultAvatar" class="user-avatar"></image>
								<text class="user-name">{{ item.userName || '官方' }}</text>
								<view class="view-count">
									<text class="icon-eye">👁️</text>
									<text class="count-text">{{ formatCount(item.visitCount) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMore">
					<text class="load-text">{{ loading ? '加载中...' : '上拉加载更多' }}</text>
				</view>
				
				<!-- 无结果提示 -->
				<view class="empty-box" v-if="!loading && scenicList.length === 0">
					<text class="icon-large">🔍</text>
					<text class="empty-text">未找到相关景点</text>
					<text class="empty-tip">换个关键词试试吧</text>
				</view>
			</view>
			
			<!-- 游记标签页 -->
			<view v-if="currentTab === 1" class="tab-content">
				<view class="empty-box">
					<text class="icon-large">📄</text>
					<text class="empty-text">游记功能开发中</text>
				</view>
			</view>
			
			<!-- 景点标签页 -->
			<view v-if="currentTab === 2" class="tab-content">
				<view class="scenic-list">
					<view 
						v-for="item in scenicList" 
						:key="item.id" 
						class="scenic-item"
						@click="goToDetail(item.id)"
					>
						<image :src="item.coverImage || defaultImage" class="item-image" mode="aspectFill"></image>
						<view class="item-info">
							<text class="item-title">{{ item.title }}</text>
							<text class="item-keywords">{{ item.keywords || '红色旅游·自然风光' }}</text>
							<view class="item-stats">
								<view class="stat-item">
									<text class="icon-star">⭐</text>
									<text class="stat-text">{{ item.rate || 5 }}</text>
								</view>
								<view class="stat-item">
									<text class="icon-eye">👁️</text>
									<text class="stat-text">{{ formatCount(item.visitCount) }}</text>
								</view>
							</view>
							<view class="item-location">
								<text class="icon-pin-red">📍</text>
								<text class="location-text">{{ item.address }}</text>
							</view>
							<view class="item-price">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{ item.price || 80 }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			currentTab: 0,
			tabs: ['综合', '游记', '景点'],
			currentSort: 0,
			sortOptions: ['智能排序', '最新发布', '最靠近景点'],
			scenicList: [],
			displayList: [],
			page: 1,
			pageSize: 10,
			total: 0,
			loading: false,
			hasMore: true,
			defaultImage: 'https://picsum.photos/400/300',
			defaultAvatar: 'https://picsum.photos/40/40?random=avatar'
		};
	},
	
	onLoad(options) {
		if (options.keyword) {
			this.keyword = decodeURIComponent(options.keyword);
			this.searchScenic();
		}
	},
	
	onReachBottom() {
		if (this.hasMore && !this.loading) {
			this.page++;
			this.searchScenic(true);
		}
	},
	
	methods: {
		// 搜索景点
		async searchScenic(loadMore = false) {
			if (!loadMore) {
				this.page = 1;
				this.scenicList = [];
			}
			
			this.loading = true;
			
			try {
				const res = await this.$http({
					url: '/api/search/scenic',
					method: 'GET',
					data: {
						keyword: this.keyword,
						page: this.page,
						pageSize: this.pageSize
					}
				});
				
				console.log('搜索结果:', res);
				
				if (res.data && res.data.code === 200) {
					const data = res.data.data;
					const list = data.list || [];
					
					console.log('找到景点:', list.length, '个');
					
					if (loadMore) {
						this.scenicList = [...this.scenicList, ...list];
					} else {
						this.scenicList = list;
					}
					
					this.total = data.total || 0;
					this.hasMore = this.scenicList.length < this.total;
					
					// 更新显示列表
					this.updateDisplayList();
				} else {
					console.error('搜索返回错误:', res.data);
				}
			} catch (e) {
				console.error('搜索失败：', e);
				uni.showToast({
					title: '搜索失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 更新显示列表（根据排序）
		updateDisplayList() {
			let list = [...this.scenicList];
			
			// 排除最相关的第一个
			if (list.length > 0 && this.currentTab === 0) {
				list = list.slice(1);
			}
			
			// 根据排序选项排序
			if (this.currentSort === 1) {
				// 最新发布
				list.sort((a, b) => b.id - a.id);
			} else if (this.currentSort === 2) {
				// 最靠近景点（这里简单用ID模拟）
				list.sort((a, b) => a.id - b.id);
			}
			
			this.displayList = list;
		},
		
		// 切换标签
		switchTab(index) {
			this.currentTab = index;
			if (index === 2) {
				// 景点标签页，显示所有景点
				this.updateDisplayList();
			}
		},
		
		// 切换排序
		changeSort(index) {
			this.currentSort = index;
			this.updateDisplayList();
		},
		
		// 格式化数量
		formatCount(count) {
			if (!count) return '0';
			if (count >= 10000) {
				return (count / 10000).toFixed(1) + '万';
			}
			return count.toString();
		},
		
		// 跳转到详情
		goToDetail(id) {
			uni.navigateTo({
				url: `/pages/scenic/detail?id=${id}`
			});
		},
		
		// 跳转到搜索页
		goToSearch() {
			uni.navigateBack();
		},
		
		// 清空关键词
		clearKeyword() {
			this.keyword = '';
			this.scenicList = [];
			this.displayList = [];
		},
		
		// 返回
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style scoped>
.search-result-page {
	min-height: 100vh;
	background-color: #F5F5F5;
}

/* 顶部搜索栏 */
.search-header {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #FFFFFF;
	border-bottom: 1px solid #EEEEEE;
}

.back-btn {
	padding: 10rpx;
	margin-right: 10rpx;
	cursor: pointer;
}

.back-icon {
	font-size: 40rpx;
	color: #333333;
}

.search-input-box {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #F5F5F5;
	border-radius: 50rpx;
	padding: 16rpx 24rpx;
	margin-right: 10rpx;
}

.search-icon {
	font-size: 32rpx;
}

.search-text {
	flex: 1;
	margin-left: 12rpx;
	font-size: 28rpx;
	color: #333333;
}

/* 分类标签 */
.category-tabs {
	display: flex;
	background-color: #FFFFFF;
	padding: 20rpx 0;
	border-bottom: 1px solid #EEEEEE;
}

.tab-item {
	flex: 1;
	text-align: center;
	font-size: 30rpx;
	color: #666666;
	padding-bottom: 10rpx;
	position: relative;
}

.tab-item.active {
	color: #1890FF;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #1890FF;
	border-radius: 2rpx;
}

/* 内容区 */
.result-content {
	padding-bottom: 30rpx;
}

.tab-content {
	min-height: calc(100vh - 200rpx);
}

/* 最相关区块 */
.relevant-section {
	background-color: #FFFFFF;
	margin: 20rpx;
	border-radius: 16rpx;
	overflow: hidden;
}

.section-title {
	padding: 24rpx;
}

.title-badge {
	display: inline-block;
	padding: 8rpx 20rpx;
	background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
	color: #FFFFFF;
	border-radius: 50rpx;
	font-size: 24rpx;
	font-weight: bold;
}

.relevant-item {
	display: flex;
	padding: 0 24rpx 24rpx 24rpx;
}

.relevant-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
	flex-shrink: 0;
}

.relevant-info {
	flex: 1;
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.relevant-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.relevant-level {
	font-size: 24rpx;
	color: #1890FF;
	margin-top: 8rpx;
}

.relevant-rating {
	display: flex;
	align-items: baseline;
	margin-top: 12rpx;
}

.rating-score {
	font-size: 36rpx;
	font-weight: bold;
	color: #1890FF;
	margin-right: 12rpx;
}

.rating-count {
	font-size: 24rpx;
	color: #999999;
}

.relevant-address {
	display: flex;
	align-items: center;
	margin-top: 12rpx;
}

.address-text {
	font-size: 24rpx;
	color: #999999;
	margin-left: 6rpx;
}

/* 排序栏 */
.sort-bar {
	display: flex;
	background-color: #FFFFFF;
	padding: 24rpx 20rpx;
	margin: 20rpx;
	border-radius: 12rpx;
}

.sort-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666666;
	padding: 12rpx 0;
}

.sort-item.active {
	color: #1890FF;
	font-weight: bold;
	background-color: #E6F7FF;
	border-radius: 8rpx;
}

/* 景点卡片列表（瀑布流样式） */
.scenic-list {
	padding: 0 20rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.scenic-card {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	overflow: hidden;
}

.scenic-image {
	width: 100%;
	height: 280rpx;
}

.scenic-info {
	padding: 16rpx;
}

.scenic-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 80rpx;
}

.scenic-meta {
	display: flex;
	align-items: center;
	margin-top: 12rpx;
}

.user-avatar {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	margin-right: 8rpx;
}

.user-name {
	font-size: 22rpx;
	color: #999999;
	flex: 1;
}

.view-count {
	display: flex;
	align-items: center;
}

.count-text {
	font-size: 22rpx;
	color: #999999;
	margin-left: 4rpx;
}

/* 景点列表项（列表样式） */
.scenic-item {
	background-color: #FFFFFF;
	margin: 20rpx;
	border-radius: 16rpx;
	overflow: hidden;
	display: flex;
	padding: 20rpx;
}

.item-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
	flex-shrink: 0;
}

.item-info {
	flex: 1;
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
}

.item-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.item-keywords {
	font-size: 24rpx;
	color: #999999;
	margin-top: 8rpx;
}

.item-stats {
	display: flex;
	align-items: center;
	margin-top: 12rpx;
}

.stat-item {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}

.stat-text {
	font-size: 24rpx;
	color: #666666;
	margin-left: 6rpx;
}

.item-location {
	display: flex;
	align-items: center;
	margin-top: 12rpx;
}

.location-text {
	font-size: 24rpx;
	color: #999999;
	margin-left: 6rpx;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-price {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: baseline;
}

.price-symbol {
	font-size: 24rpx;
	color: #FF6B6B;
}

.price-value {
	font-size: 36rpx;
	font-weight: bold;
	color: #FF6B6B;
}

/* 加载更多 */
.load-more {
	text-align: center;
	padding: 40rpx 0;
}

.load-text {
	font-size: 26rpx;
	color: #999999;
}

/* 空状态 */
.empty-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 0;
}

.empty-text {
	font-size: 32rpx;
	color: #999999;
	margin-top: 30rpx;
}

.empty-tip {
	font-size: 26rpx;
	color: #CCCCCC;
	margin-top: 16rpx;
}

/* 图标样式 */
.icon-pin,
.icon-pin-red {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.icon-eye {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.icon-star {
	font-size: 28rpx;
	margin-right: 8rpx;
}

.icon-large {
	font-size: 120rpx;
	color: #CCCCCC;
}
</style>
